<template>
  <div class="vipInfo">
    <van-nav-bar
      id="van-bar"
      style="color: #fff"
      :title="title"
      fixed
      :border="border"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/myicon/nav-back-white.png"
        />
      </template>
      <template #right> 购买记录 </template>
    </van-nav-bar>
    <div>
      <div class="head" :style="'padding-top:' + topheight + 'px;'">
        <div class="headInfo">
          <img class="userimg" :src="userInfo.avatar" alt="" srcset="" />
          <div class="viptitle">
            <p class="username">{{ userInfo.nickname }}</p>
            <p>未开通会员服务</p>
          </div>
          <img
            class="vipimg"
            src="@/assets/myicon/member-vip.png"
            alt=""
            srcset=""
          />
        </div>
      </div>
      <div class="vipinfo">
        <p class="title">VIP特权</p>
        <div class="viplist">
          <div class="list" v-for="(item, index) in list" :key="index">
            <img :src="item.img" alt="" />
            <div class="text">
              <p class="title1">{{ item.title }}</p>
              <p>{{ item.text }}</p>
            </div>
          </div>
        </div>
        <p class="title">选择套餐</p>
        <div class="vipbuy">
          <div
            class="vipbox"
            :class="{ active: isActive == index }"
            v-for="(item, index) in buylist"
            :key="index"
            @click="SetisActive(index)"
          >
            <p class="VIPtitle">{{ item.title }}</p>
            <p class="VIPprice">¥ {{ item.price }}/月</p>
            <p class="VIPtext">{{ item.text }}</p>
          </div>
        </div>
        <p class="title">支付方式</p>

        <div class="buylist">
          <div class="buyinfo" @click="buyActive = 0">
            <img
              class="buyico"
              src="@/assets/myicon/pay-wechat.png"
              alt=""
              srcset=""
            />
            <span>微信支付</span>
            <img
              class="buyActive"
              src="@/assets/myicon/checkbox-checked.png"
              v-if="buyActive == 0"
              alt=""
              srcset=""
            />
            <img
              class="buyActive"
              src="@/assets/myicon/checkbox.png"
              alt=""
              v-else
              srcset=""
            />
          </div>
          <div class="buyinfo" @click="buyActive = 1">
            <img
              class="buyico"
              src="@/assets/myicon/pay-alipay.png"
              alt=""
              srcset=""
            />
            <span>支付宝支付</span>
            <img
              class="buyActive"
              src="@/assets/myicon/checkbox-checked.png"
              v-if="buyActive == 1"
              alt=""
              srcset=""
            />
            <img
              class="buyActive"
              src="@/assets/myicon/checkbox.png"
              alt=""
              v-else
              srcset=""
            />
          </div>
        </div>
        <div class="button">立即支付 ¥{{ price }}</div>
      </div>
    </div>
    <!-- <div v-html="html"></div> -->
  </div>
</template>

<script>
import { vipinfo } from '@/api/setting'
import Cookies from 'js-cookie'
import md5 from 'js-md5';
export default {
  data() {
    return {
      html: '',
      border: '',
      widthPx: '28px',
      heightPx: '28px',
      topheight: 0,
      title: '会员中心',
      list: [
        {
          title: '开放聊天功能',
          img: require('@/assets/myicon/vip-1.png'),
          text: '每日可私聊XX人',
        },
        {
          title: '在线约玩功能',
          img: require('@/assets/myicon/vip-2.png'),
          text: '每日最多可约玩XX人',
        },
        {
          title: '发布动态功能',
          img: require('@/assets/myicon/vip-3.png'),
          text: '每日可私聊XX人',
        },
        {
          title: '尊贵会员标识',
          img: require('@/assets/myicon/vip-4.png'),
          text: '每日最多可约玩XX人',
        },
        {
          title: '微信邀约功能',
          img: require('@/assets/myicon/vip-5.png'),
          text: '每日最多解锁XX人微信',
        },
        {
          title: '隐身访问ta人',
          img: require('@/assets/myicon/vip-6.png'),
          text: '每日最多可约玩XX人',
        },
        {
          title: '悄悄关注ta人',
          img: require('@/assets/myicon/vip-7.png'),
          text: '不再对方粉丝内显示',
        },
        {
          title: '查看ta人足迹',
          img: require('@/assets/myicon/vip-8.png'),
          text: '一键解锁谁看过我',
        },
      ],
      isActive: 0,
      buyActive: 0,

      buylist: [
        {
          title: '月VIP',
          text: '每日解锁10人微信',
          price: 98,
          yue: 1,
        },
        {
          title: '季VIP',
          text: '每日解锁15人微信',
          price: 56,
          yue: 3,
        },
        {
          title: '年VIP',
          text: '每日解锁15人微信',
          price: 18,
          yue: 12,
        },
      ],
      price: 0,
      userInfo: {},
    }
  },
  mounted() {
    this.getprice()
    this.topheight = document.getElementById('van-bar').offsetHeight
    this.getInfo()
    this.userInfo = this.$store.state.userInfo
  },

  methods: {
    getInfo() {
      console.log();
      window.open('https://www.seyou1.vip/h5/member?token='+md5(this.$store.state.token))
      // vipinfo(md5(this.$store.state.token)).then((res) => {
      //   // this.list = list.concat(...res.data.list)
      //   console.log(res)
      //   // 加载状态结束
      // })
    },
    getprice() {
      this.price =
        this.buylist[this.isActive].price * this.buylist[this.isActive].yue
    },
    onClickRight() {
      this.$router.push('/vip/buylist')
    },
    onClickLeft() {
      this.$router.back()
    },
    SetisActive(e) {
      this.isActive = e
      this.getprice()
    },
  },
}
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  background: linear-gradient(180deg, #cde1fd 0%, rgba(255, 255, 255, 0) 100%);
  top: 0;
  height: 148px;
  /* background: url('../../assets/myicon/bg.png') no-repeat; */
}
.vipInfo {
}

>>> .van-nav-bar__title {
  color: #fff;
}
.head {
  width: 375px;
  background: linear-gradient(180deg, #323232 0%, rgba(26, 26, 26, 0.7) 100%);
  border-radius: 0px 0px 8px 8px;
}
.headInfo {
  width: 355px;
  height: 95px;
  margin: 0 auto;

  background: linear-gradient(180deg, #ffe5cc 0%, #e5c4a4 100%);
  border-radius: 8px 8px 0px 0px;
}
.userimg {
  width: 49px;
  height: 49px;
  margin: 23px 15px 23px 16px;
  border-radius: 50%;
  display: inline-block;
}
.viptitle {
  display: inline-block;
  vertical-align: top;
  margin: 28px 0;
  color: #767676;
  line-height: 1.5;
  font-size: 12px;
}
.viptitle .username {
  color: #3d3d3d;
  font-size: 16px;
  font-weight: 600;
}
.text {
  vertical-align: top;
  color: #767676;
  display: inline-block;
  line-height: 1.5;
  font-size: 12px;
}
.text .title1 {
  color: #3d3d3d;
  font-size: 16px;
  font-weight: 600;
}
.vipimg {
  float: right;
  width: 64px;
  height: 58px;
  margin: 18px 28px;
}
.vipinfo {
  width: 355px;
  margin: 0 auto;
}
.viplist {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.viplist .list {
  width: 50%;
  margin-bottom: 24px;
}
.viplist .list img {
  width: 40px;
  height: 40px;
  margin-right: 7px;
  display: inline-block;
}

.vipbuy {
  display: flex;
  justify-content: space-between;
}
.vipbuy .vipbox {
  text-align: center;
  width: 109px;
  height: 100px;
  background: rgba(238, 238, 238, 0.5);
  border-radius: 8px;
}
.active {
  background: rgba(237, 191, 131, 0.3) !important;

  border: 1px solid rgba(102, 52, 9, 0.5) !important;
}

.buyinfo {
  padding: 16px 0;
}
.buyinfo .buyico {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.buyinfo .buyActive {
  width: 17px;
  height: 17px;
  float: right;
}
.buyinfo span {
  vertical-align: top;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #1a1a1a;
}

.van-cell::after {
  border-color: #d8d8d8;
}
.van-cell-group,
.van-cell,
.van-nav-bar {
  background: transparent;
}
>>> .van-nav-bar__content {
  background: transparent !important;
}
.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}
.title {
  height: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 16px;
  margin: 16px 0;
  -webkit-background-clip: text;
}
.VIPtitle {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #3d3d3d;
  line-height: 14px;
  margin-top: 16px;
}
.VIPprice {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #3d3d3d;
  line-height: 16px;
  margin-top: 12px;
}
.VIPtext {
  font-size: 10px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
  line-height: 10px;
  margin-top: 16px;
}
.button {
  width: 100%;
  height: 50px;
  background: #323232;
  border-radius: 8px;
  color: #ffe5cc;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
}
</style>